@(message: String)(implicit request: RequestHeader)
@import helper._
@main("Ionic with scala.js",styles=styles,scripts=js,modals=models) {
<ion-app>
    <!-- 左侧菜单 -->
    <ion-menu side="start" content-id="main-content">
        <ion-header>
            <ion-toolbar translucent>
                <ion-title>Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-item>
                    <ion-icon name="mail" slot="start"></ion-icon>
                    <ion-label>Mail</ion-label>
                </ion-item>
                <ion-item>
                    <ion-icon name="paper-plane" slot="start"></ion-icon>
                    <ion-label>Paper</ion-label>
                </ion-item>
                <ion-item>
                    <ion-icon name="heart" slot="start"></ion-icon>
                    <ion-label>Favorites</ion-label>
                </ion-item>
                <ion-item>
                    <ion-icon name="archive" slot="start"></ion-icon>
                    <ion-label>Archived</ion-label>
                </ion-item>
                <ion-item>
                    <ion-icon name="trash" slot="start"></ion-icon>
                    <ion-label>Trash</ion-label>
                </ion-item>
                <ion-item>
                    <ion-icon name="warning" slot="start"></ion-icon>
                    <ion-label>Spam</ion-label>
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-menu>
    <!-- 中心内容 -->
    <div class="ion-page" id="main-content">
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-menu-button></ion-menu-button>
                </ion-buttons>
                <ion-title>个人中心</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding">

            <ion-button expand="block">Show Modal</ion-button>


            <p id="testvalue">ionic 移动应用。</p>

            <a href="javascript:;">
                session.get("uname")
            </a>

        </ion-content>
        <ion-content  class="ion-padding">
            <dl class="">
                <dd><a href="javascript:;">session.get("admin")</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a class="lay-btn" data-method="mpassword" data-type="auto" >修改密码</a></dd>
                <dd><a data-method="loginnotice" data-type="auto" class="lay-btn">测试</a></dd>
                <dd><a href="@routes.HomeController.index()"><ion-button>Home</ion-button></a></dd>
            </dl>
        </ion-content>
        <ion-content  >
            <div>
                <h2>Play and Scala.js share a same message</h2>
                <ul>
                    <li>Play shouts out: <em>@message</em></li>
                    <li>Scala.js shouts out: <em id="scalajsShoutOut"></em></li>
                    <li>Scala.js shouts out 1: <em id="scalajsShoutOut1"></em></li>
                </ul>
            </div>
            <div id="bindingDemo" accesskey="ionic">
                @CSRF.formField
            </div>
        </ion-content>

    </div>
    <!---  header start -->


</ion-app>
}

@styles = {
<script type="module" src="https://cdn.jsdelivr.net/npm/@@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@ionic/core/css/ionic.bundle.css" />
<style>
    :root {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 22px;
    }
  </style>
<script type="module">
    import { modalController } from 'https://cdn.jsdelivr.net/npm/@@ionic/core/dist/ionic/index.esm.js';
    window.modalController = modalController;
  </script>
}

@js={

}

@models = {
customElements.define('modal-content', class ModalContent extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
    <ion-toolbar>
        <ion-title>Modal Content</ion-title>
        <ion-buttons slot="end">
            <ion-button onclick="dismissModal()">Close</ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content fullscreen>
    <ion-list>
        <ion-item>
            <ion-avatar slot="start">
                <ion-img src="./avatar-gollum.jpg"/>
            </ion-avatar>
            <ion-label>
                <h2>Gollum</h2>
                <p>Sneaky little hobbitses!</p>
            </ion-label>
        </ion-item>
        <ion-item>
            <ion-avatar slot="start">
                <ion-img src="./avatar-frodo.jpg"/>
            </ion-avatar>
            <ion-label>
                <h2>Frodo</h2>
                <p>Go back, Sam! I'm going to Mordor alone!</p>
            </ion-label>
        </ion-item>
        <ion-item>
            <ion-avatar slot="start">
                <ion-img src="./avatar-samwise.jpg"/>
            </ion-avatar>
            <ion-label>
                <h2>Samwise</h2>
                <p>What we need is a few good taters.</p>
            </ion-label>
        </ion-item>
    </ion-list>
</ion-content>
`;
}
});

let currentModal = null;
const button = document.querySelector('ion-button');
button.addEventListener('click', createModal);

async function createModal() {
const modal = await modalController.create({
component: 'modal-content'
});

await modal.present();
currentModal = modal;
}

function dismissModal() {
if (currentModal) {
currentModal.dismiss().then(() => { currentModal = null; });
}
}
}
